<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <el-col class="logo fontS_26">
        <img :src="SYSLOGO" alt="">
        <span>Time Machine</span>
      </el-col>
      <el-col>
        管理系统
      </el-col>
      <el-col class="account">
        <el-dropdown trigger="hover" class="account-content">
          <span class="el-dropdown-link userinfo-inner logoOut"><img src="../assets/image/timg.jpg" /></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>{{username}}</el-dropdown-item>
            <!--<el-dropdown-item divided @click.native="editPwd">修改密码</el-dropdown-item>-->
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
      <!-- 侧边栏 -->
      <el-col class="leftNav">
        <el-menu :default-active="activeIndex" unique-opened router>

          <el-menu-item index="/welcome">
            <span slot="title">&emsp;首页</span>
          </el-menu-item>

          <!-- <el-submenu index="1">
            <template slot="title">&emsp;用车管理</template>
            <el-menu-item index="/imorder">我要用车</el-menu-item>
            <el-menu-item index="/transorder">用车订单</el-menu-item>
          </el-submenu> -->
          <!-- <el-submenu index="2">
             <template slot="title">&emsp;个人中心</template>
            <el-menu-item index="/infoDeta">个人信息</el-menu-item> -->
            <!-- <el-menu-item index="/amendPsd">修改密码</el-menu-item> -->
          <!-- </el-submenu> -->
           <el-submenu index="3" v-if="$store.state.routes.routes.jglb || $store.state.routes.routes.zhlb">
            <template slot="title" >&emsp;代理管理</template>
            <el-menu-item index="/organList"  v-if="$store.state.routes.routes.jglb">机构列表</el-menu-item>
            <!-- <el-menu-item index="/organSet">机构创建</el-menu-item> -->
            <el-menu-item index="/agencyList" v-if="$store.state.routes.routes.zhlb">账户列表</el-menu-item>
            <!-- <el-menu-item index="/agencySet">代理创建</el-menu-item> -->
          </el-submenu>
           <el-submenu index="4"  v-if="$store.state.routes.routes.glylb || $store.state.routes.routes.jslb || $store.state.routes.routes.qxlb">
            <template slot="title">&emsp;系统管理</template>
            <el-menu-item index="/systemList" v-if="$store.state.routes.routes.glylb ">管理员列表</el-menu-item>
            <el-menu-item index="/roleList" v-if="$store.state.routes.routes.jslb">角色列表</el-menu-item>
            <el-menu-item index="/limitsList" v-if="$store.state.routes.routes.qxlb">权限列表</el-menu-item>
          </el-submenu>
           <el-submenu index="5" v-if="$store.state.routes.routes.ddlb || $store.state.routes.routes.yczd || $store.state.routes.routes.sjlb">
            <template slot="title">&emsp;  管理</template>
            <el-menu-item index="/orderList"  v-if="$store.state.routes.routes.ddlb">订单列表</el-menu-item>
            <el-menu-item index="/orderBill"  v-if="$store.state.routes.routes.yczd">账单列表</el-menu-item>
             <el-menu-item index="/driverList"  v-if="$store.state.routes.routes.sjlb">司机列表</el-menu-item>
            
          </el-submenu>
        </el-menu>
      </el-col>
      <!-- 内容 -->
      <el-col class="content">
        <div class="tag" style="display: none">
          <el-tag v-if="item.path!='/login'" type="warning" :closable="isCloseTags" v-for="(item,index) in tags" :key="index" :paths="item.path" @close="closeTag($event)">
            <span @click="toOther(item.path)" v-show="$route.path==item.path" class="shanxian">{{item.name}}</span>
            <!--<span @click="toOther(item.path)"  style="color: #E6A23C">{{item.name}}</span>-->
          </el-tag>
          <el-button size="mini" type="danger" @click="closeOther" v-if="tags.length>1">关闭其它</el-button>
        </div>
        <router-view style="height: auto"></router-view>
      </el-col>
    </el-col>

    <!-- 修改密码窗 -->
    <el-dialog title="修改密码" :visible.sync="editPwdFormVisible" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="editPwdForm" ref="editPwdForm" status-icon label-width="100px" :rules="editPwdFormRules" style="text-align:left">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-col :span="22">
            <el-input v-model="editPwdForm.oldPwd" placeholder="请输入旧密码"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-col :span="22">
            <el-input type="password" v-model="editPwdForm.newPwd" placeholder="请输入新密码"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="reNewPwd">
          <el-col :span="22">
            <el-input type="password" v-model="editPwdForm.reNewPwd" placeholder="请确认新密码"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelSubmit('editPwdForm')">取 消</el-button>
        <el-button type="primary" @click.native="editPwdSubmit('editPwdForm')" :loading="editPwdLoading">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
//import store from store
export default {
  name: "",
  data() {
    var checkOldPwd = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("旧密码都不填？"));
      } else {
        callback();
      }
    };
    var checkNewPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("新密码也不填？"));
      } else {
        if (value.length < 5) {
          return callback(new Error("就不能长一点？(6到20个之间)"));
        } else if (value.length > 10) {
          return callback(new Error("就不能短一点？(6到20个之间)"));
        } else {
          var reg = /^[A-Za-z0-9]{6,20}$/;
          if (!reg.test(value)) {
            return callback(new Error("我是有原则的！(6-20位字母数字组合)"));
          }
        }
        callback();
      }
    };
    var checkReNewPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("搞事情啊你！不能为空"));
      } else if (value !== this.editPwdForm.newPwd) {
        callback(new Error("你有2个新密码？"));
      } else {
        callback();
      }
    };

    return {
      SYSLOGO: "",
      nodes: this.$router.options.routes,
      editPwdFormVisible: false,
      editPwdLoading: false,
      username: "",
      isCloseTags: false,
      editPwdForm: {
        oldPwd: "",
        newPwd: "",
        reNewPwd: ""
      },
      editPwdFormRules: {
        oldPwd: [
          {
            validator: checkOldPwd,
            trigger: "blur"
          }
        ],
        newPwd: [
          {
            validator: checkNewPwd,
            trigger: "blur"
          }
        ],
        reNewPwd: [
          {
            validator: checkReNewPwd,
            trigger: "blur"
          }
        ]
      },
      tags: [],
    };

  },
  created() {
    //  console.log(this.$store.state.routes.routes.jglb)
    //      console.log(this.$route)
    //      console.log(this.$store.state.routes.routes)
    //      this.tags = this.$store.state.user.tags
    this.tags.push({ name: this.$route.query.name, path: this.$route.query.path })
    this.SYSLOGO = process.env.SYSLOGO;
    this.username = window.sessionStorage.getItem("username");
    // alert(this.)
    //这里没有直接使用this.$router.options.routes，是因为addRoute的路由规则，在这里this.$router.options.routes获取不到
    //有兴趣的可以看一下源码，是为什么获取不到，但是却又有规则了
    //另外在开发的时候，可能由于是热部署，也会不断重复的给nodes添加元素，造成导航条有重复的，简单解决，可以设置一个开关
    //      let isLoadNodes = sessionStorage.getItem("isLoadNodes");
    //      if (!isLoadNodes) {
    //        let data = JSON.parse(window.sessionStorage.getItem("user"));
    //        this.nodes.push(...data);
    //        sessionStorage.setItem("isLoadNodes", "true");
    //      }
  },
  updated() {
    //      this.tags = this.$store.state.user.tags

    this.$store.state.user.tags.length <= 1 ? this.isCloseTags = false : this.isCloseTags = true
  },
  computed: {
    //高亮侧边栏
    activeIndex() {
       console.log(this.$route.query.from)
      if (this.$route.matched[1].path.indexOf('Detail') > -1) {
        // console.log(this.$route.query.from)
        return '/' + this.$route.query.from

      } else {
        return '/' + this.$route.matched[1].path.split('/')[1]
      }
    }
  },
  methods: {
    closeTag(event) {
      var current = event.srcElement.parentNode.getAttribute('paths')
      for (var key in this.$store.state.user.tags) {
        if (this.$store.state.user.tags[key].path == current) {
          this.$store.state.user.tags.splice(key, 1)

        }
      }

      this.$router.push(this.$store.state.user.tags[this.$store.state.user.tags.length - 1].path.toString())
      // //console.log(this.$store.state.user.tags[this.$store.state.user.tags-1])
    },
    toOther(data) {
      this.$router.push(data)
    },
    closeOther() {
      this.tags = this.$store.state.user.tags = [];
      //console.log(this.$store.state.user.tags);
      this.$store.state.user.tags.push({ "name": this.$route.name, "path": this.$route.path })
    },
    editPwd() {
      this.editPwdFormVisible = true;
    },
    cancelSubmit(editPwdForm) {
      this.editPwdFormVisible = false;
      this.$refs[editPwdForm].resetFields();
    },
    editPwdSubmit(fn) {
      this.$refs[fn].validate(valid => {
        if (valid) {
          this.editPwdLoading = true;
          this.$http('user/user_modify_password', { data: { old: this.editPwdForm.oldPwd, new: this.editPwdForm.newPwd } })
            .then(resp => {
              this.editPwdLoading = false;
              if (resp.error_code == 0) {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                window.sessionStorage.setItem("isShowPwd", false);
              } else {
                this.$notify({
                  title: "错误",
                  message: resp.error_msg,
                  type: "error"
                });
              }
            });
          this.editPwdFormVisible = false;
          this.$refs[fn].resetFields();
        }
      });
    },
    logout: function() {
      var _this = this;
      this.$confirm("确认退出吗?", "提示", {})
        .then(() => {
          this.$http('/noAuth/sysloginOut.do').then(resp => {
            if (resp.code == 1) {
              _this.$router.push("/login");
              window.sessionStorage.removeItem("title")
              window.sessionStorage.removeItem("name")
              window.sessionStorage.removeItem("isShowPwd")
              window.sessionStorage.removeItem("routeConst")
            }
          })
        })
        .catch(() => { });
    },
  },
  mounted() {


  }
};
</script>

<style scoped>
@import "../assets/css/default.css";
.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  height: 80px;
  background: rgba(74, 4, 38, 0.53);
  line-height: 80px;
  color: white;
  /*display: flex;*/
}
.mainContent{
  border-top: none;
}
.header .logo {
      text-align: left;
}


/*.heaer .middle {*/


/*flex: 1;*/


/*}*/

.header .account {
  width: 300px;
  float: right;
}

.header .account-content {
  width: 120px;
  position: absolute;
  top: 0;
  right: 0;
}

.header  .logo img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 15px;
  margin-left: 80px;
  vertical-align: top;
}
.logoOut img{
   width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: 15px;
}
.header img:hover {
  cursor: pointer;
}

.main {
  min-height: calc(100% - 60px);
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  background: white;
}

.main .leftNav {
  width: 200px;
  background: rgb(238, 241, 246);
}

.main .leftNav ul li {
  text-align: left;
  /* background: rgb(238, 241, 246) */
}

.main .leftNav ul>li {
  background: rgb(238, 241, 246);
}

.main .content {
  /*flex: 1;*/
  background: white;
  height: 100%;
  /* padding:20px */
}


/*.el-dialog__wrapper,.el-message-box__wrapper{*/


/*z-index: 20000!important;*/


/*}*/


/*.el-dropdown-menu.el-popper{*/


/*z-index:20000!important;*/


/*}*/

.el-menu-item {
  vertical-align: initial;
  min-width: 100px !important;
}

.content .tag {
  min-height: 40px;
  max-height: 120px;
  line-height: 40px;
  text-align: left;
  padding: 0px 8px;
}

.el-tag {
  margin-left: 5px;
  display: inline-block;
}

.el-tag:hover {
  cursor: pointer;
}

.shanxian {
  animation: shanxian 3s infinite linear
}

@keyframes shanxian {
  0% {
    color: white;
  }
  50% {
    color: #c57a09;
  }
  100% {
    color: white
  }
}
</style>


